<template>
  <el-row
    type="flex"
    justify="space-between"
    align="middle"
    style="width:100%;height:30px"
  >
    <!-- 名字 -->
    <el-col v-if="type === 1">{{ data.name }}</el-col>
    <el-col v-else>
      <h3><i class="el-icon-office-building" /> {{ companyName }}</h3>
    </el-col>
    <!-- 右侧栏目 -->
    <el-col :span="4">
      <el-row type="flex" justify="end" align="middle">
        <!-- 管理人 -->
        <el-col>{{ type === 1 ? data.manager : '负责人' }}</el-col>
        <!-- 操作 -->
        <el-col>
          <!-- 下拉菜单 -->
          <el-dropdown trigger="click" @command="handleFn">
            <span> 操作<i class="el-icon-arrow-down" /> </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <!-- 编辑部门和删除部门只会在子节点上显示 -->
              <el-dropdown-item
                v-if="type === 1"
                command="edit"
              >编辑部门</el-dropdown-item>
              <el-dropdown-item
                v-if="type === 1"
                command="del"
              >删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import eventBus from '@/utils/event-bus.js'
import { delDepartmentAPI } from '@/api/departments.js'

export default {
  props: {
    data: Object,
    type: {
      type: Number,
      default: 1
    },
    companyName: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleFn(type) {
      // console.log(type)
      const { id } = this.data
      // 删除
      if (type === 'del') {
        this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$message.success('删除成功!')
            delDepartmentAPI(id)
            this.$emit('reload') // 刷新数据
          })
          .catch(() => this.$message.info('已取消删除'))
      }
      // 添加
      if (type === 'add') eventBus.$emit('showDialogFn', id)
      // 编辑
      if (type === 'edit') eventBus.$emit('showDialogFn', id, true)
    }
  }
}
</script>

<style scoped></style>
